<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>添加角色</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layuimini/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="layuimini/css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form" lay-filter="roleForm">
    <div class="layui-form-item">
        <label class="layui-form-label required">角色名</label>
        <div class="layui-input-block">
            <input type="text" name="roleName" lay-verify="required" lay-reqtext="角色名不能为空" placeholder="请输入角色名" value=""
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">角色权限</label>
        <div id="ptree" class="demo-tree-more" name="ptree" style="margin-left: 150px"></div>
    </div>
<input type="hidden" name="permissionList">
    <div class="layui-form-item">
        <label class="layui-form-label required">角色描述</label>
        <div class="layui-input-block">
            <input type="text" name="description" lay-verify="required" lay-reqtext="角色描述不能为空" placeholder="请输入角色描述" value=""
                   class="layui-input">
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>
<script src="layuimini/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="layuimini/js/MyUtils1.js" charset="utf-8"></script>
<script src="layuimini/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script>
    layui.use(['form','tree','util'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$,
            util = layui.util,
            tree=layui.tree
        data2 = [{"children":[{"children":[{"children":[],"id":8,"title":"管理员列表"},{"children":[],"id":10,"title":"新增管理员"},{"children":[],"id":11,"title":"更新管理员"},{"children":[],"id":12,"title":"删除管理员"},{"children":[],"id":13,"title":"搜索管理员"}],"id":3,"title":"用户管理"},{"children":[{"children":[],"id":14,"title":"获取角色信息"},{"children":[],"id":15,"title":"添加角色"},{"children":[],"id":16,"title":"更新角色"},{"children":[],"id":17,"title":"删除角色"}],"id":4,"title":"角色管理"},{"children":[],"id":5,"title":"权限管理"}],"id":1,"title":"系统管理"},{"children":[],"id":2,"title":"业务管理"}];
       //权限树
        tree.render({
            elem: '#ptree'
            ,data: data2
            ,showCheckbox: true  //是否显示复选框
            ,id: 'ptree'
            ,isJump: true //是否允许点击节点时弹出新窗口跳转
            ,click: function(obj){
                var data = obj.data;  //获取当前点击的节点数据
                //console.log(getCheckedId(data))

                layer.msg('<br>节点数据：' + JSON.stringify(data));
            },
            oncheck:function (obj) {
                //console.log(tree.getChecked('ptree'))
                //console.log(getCheckedId(tree.getChecked('ptree')))
                form.val('roleForm',{
                    "permissionList":getCheckedId(tree.getChecked('ptree'))
                })
                //postRequest("/tree",JSON.stringify(tree.getChecked('ptree')))
            }
        });
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            console.log(JSON.stringify(data.field))

            var res=postRequest("/addRole",JSON.stringify(data.field))
           // console.log(res)
            var index = layer.alert(res.msg, {
                title: '提示'
            }, function () {
                // 关闭弹出层
                layer.close(index);
                var iframeIndex = parent.layer.getFrameIndex(window.name);
                parent.layer.close(iframeIndex);
                //关闭弹出层刷新父页面
                window.parent.location.reload();
            });
            return false;
        });
    });



</script>
</body>
</html>